<script setup lang="ts">
defineOptions({
    name: 'EvaluateCard'
})

import { evaluateConsultOrderAPI } from '@/apis/consult';
import type { ConsultOrderItem } from '@/types/consult';
import type { EvaluateDoc } from '@/types/room';
import { computed, inject, ref, type Ref } from 'vue';

// 接收父组件传来的数据
defineProps<{
    evaluateDoc?: EvaluateDoc
}>()

// 定义响应式数据
const score = ref<number>(0)
const content = ref<string>('')
const anonymousFlag = ref(false)
// 通过计算属性来控制提交按钮是否可用
// 如果没有score 和 content 的值 disable为true
const disable = computed(() => score.value === 0 || content.value === '')

// 接收祖先组件传递的数据
const consult = inject<Ref<ConsultOrderItem>>('consult')

const updateEva = inject<(score: number) => void>('updateEva')

// 提交评价按钮
const onSubmit = async () => {
    if (consult?.value.docInfo) {
        // 发送ajax请求 但是list数据是通过socket来获取
        await evaluateConsultOrderAPI({
            docId: consult.value.docInfo?.id,
            orderId: consult?.value.id,
            score: score.value,
            content: content.value,
            anonymousFlag: anonymousFlag.value ? 1 : 0
        })
        // 调用 更新 list数组里面的方法
        if (updateEva) {
            updateEva(score.value)
        }
    }

}
</script>

<template>
    <!-- 显示图片 -->
    <div class="evalutate-card" v-if="evaluateDoc">
        <p class="title">医生服务评价</p>
        <p class="desc">我们会更加努力提升服务质量</p>
        <van-rate :modelValue="evaluateDoc.score" size="7vw" gutter="3vw" color="#FADB14" void-icon="star"
            void-color="rgba(0,0,0,0.04)" />
    </div>
    <!-- 评价表单 -->
    <div class="evalutate-card" v-else>
        <p class="title">感谢您的评价</p>
        <p class="desc">本次在线问诊服务您还满意吗？</p>
        <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)"
            v-model="score" />
        <van-field type="textarea" maxlength="150" show-word-limit rows="3" v-model="content"
            placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"></van-field>
        <div class="footer">
            <van-checkbox v-model="anonymousFlag">匿名评价</van-checkbox>
            <van-button type="primary" size="small" round v-if="!disable" @click="onSubmit">
                提交评价
            </van-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.evalutate-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;

    .title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .desc {
        font-size: 12px;
        margin-bottom: 15px;
        color: var(--cp-tip);
    }

    .van-field {
        background-color: var(--cp-bg);
        margin: 15px 0;
        border-radius: 8px;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        ::v-deep() {
            .van-checkbox {
                .van-icon {
                    font-size: 12px;
                }

                &__label {
                    font-size: 12px;
                    color: var(--cp-tip);
                }
            }

            .van-button {
                padding: 0 16px;

                &.disabled {
                    opacity: 1;
                    background: #fafafa;
                    color: #d9dbde;
                    border: #fafafa;
                }
            }
        }
    }
}
</style>